<template>
  <a-descriptions title="影像学检查" bordered size="middle" :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
    <a-descriptions-item label="项目" :span="3">
      <a-row>
        <a-col :span="12">
          <span>服务前</span>
        </a-col>
        <a-col :span="12">
          <span>服务后</span>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="下肢血管CTA" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.extremityVesselCta">
          {{ archiveFirst.extremityVesselCta }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.extremityVesselCta }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="下肢血管DSA" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.extremityVesselDsa">
          {{ archiveFirst.extremityVesselDsa }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.extremityVesselDsa }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="下肢血管MRI" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.extremityVesselMri">
          {{ archiveFirst.extremityVesselMri }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.extremityVesselMri }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="下肢血管B超" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.extremityVesselBi">
          {{ archiveFirst.extremityVesselBi }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.extremityVesselBi }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="足X射线" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.footXray">
          {{ archiveFirst.footXray }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.footXray }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
    <a-descriptions-item label="其他信息" :span="3">
      <a-row>
        <a-col :span="12" v-if="archiveFirst && archiveFirst.other">
          {{ archiveFirst.other }}
        </a-col>
        <a-col :span="12" v-if="archiveSummary && archiveSummary.extremityVesselCta">
          {{ archiveSummary.other }}
        </a-col>
        <a-col :span="12" v-else>
          <div :style="{ width: '100%' }">
            <div class="plus-record" @click="summaryRecord">
              <a-icon :style="{ color: '#8e908f' }" type="plus" />
              <span>录入</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-descriptions-item>
  </a-descriptions>
</template>

<script>
export default {
  name: 'Iconography',
  props: ['archiveFirst', 'archiveSummary'],
  data() {
    return {}
  },
  methods: {
    summaryRecord() {
      this.$emit('fatherFn')
    }
  }
}
</script>

<style lang="less" scoped>
.plus-record {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center;
  width: 5rem;
  height: 5rem;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  margin: 0 auto;

  span {
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
    color: #8e908f;
  }
}
/deep/ .ant-descriptions-item-label {
  width: 25% !important;
}
/deep/ .ant-descriptions-item-content {
  width: 75% !important;
}
</style>
